﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- BEGIN META -->
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Olive Enterprise">
    <!-- END META -->
    
    <!-- BEGIN SHORTCUT ICON -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- END SHORTCUT ICON -->
    <title>
      Advanced Form Components
    </title>
    
    <!-- BEGIN STYLESHEET -->
    
    <link href="css/bootstrap.min.css" rel="stylesheet"><!-- BOOTSTRAP CSS -->
    <link href="css/bootstrap-reset.css" rel="stylesheet"><!-- BOOTSTRAP CSS -->
    
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"><!-- FONT AWESOME ICON STYLESHEET -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-fileupload/bootstrap-fileupload.css"><!-- BOOTSTRAP FILEUPLOAD PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-wysihtml5/bootstrap-wysihtml5.css"><!-- BOOTSTRAP WYSIHTML5 PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-datepicker/css/datepicker.css"><!-- BOOTSTRAP DATEPICKER PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-timepicker/compiled/timepicker.css"><!-- BOOTSTRAP TIMEPICKER PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-colorpicker/css/colorpicker.css"><!-- BOOTSTRAP COLORPICKER PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-daterangepicker/daterangepicker-bs3.css"><!-- DATERANGE PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-datetimepicker/css/datetimepicker.css"><!-- DATETIMEPICKER PLUGIN CSS -->
<link rel="stylesheet" type="text/css" href="assets/jquery-multi-select/css/multi-select.css"><!-- JQUERY MULTI SELECT PLUGIN CSS -->
<link href="css/style.css" rel="stylesheet"><!-- THEME BASIC CSS -->
<link href="css/style-responsive.css" rel="stylesheet"><!-- THEME BASIC RESPONSIVE  CSS -->
    
    <!--[if lt IE 9]>
<script src="js/html5shiv.js">
</script>
<script src="js/respond.min.js">
</script>
<![endif]-->
  <!-- END STYLESHEET -->
  
  </head>
  <body>
    <!-- BEGIN SECTION -->
    
    <section id="container" class="">
      <!-- BEGIN HEADER -->
      
      <header class="header white-bg">
        
        <!-- SIDEBAR TOGGLE BUTTON -->
        <div class="sidebar-toggle-box">
          <div  data-placement="right" class="fa fa-bars tooltips">
          </div>
        </div>
        <!-- SIDEBAR TOGGLE BUTTON  END-->
        <a href="index.html" class="logo">
          olive
          <span>
            admin
          </span>
        </a>
        
        <!-- START HEADER  NAV -->
        
        <nav class="nav notify-row" id="top_menu">
          
          <ul class="nav top-menu">
            <!-- START NOTIFY TASK BAR -->
            
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                <i class="fa fa-tasks">
                </i>
                <span class="badge bg-success">
                  6
                </span>
              </a>
              
              <ul class="dropdown-menu extended tasks-bar">
                <li class="notify-arrow notify-arrow-blue">
                </li>
                <li>
                  <p class="blue">
                    You have 6 pending tasks
                  </p>
                </li>
                <li>
                  <a href="#">
                    <div class="task-info">
                      <div class="desc">
                        Dashboard v1.3
                      </div>
                      <div class="percent">
                        40%
                      </div>
                    </div>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-success set-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
                        <span class="sr-only">
                          40% Complete (success)
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="task-info">
                      <div class="desc">
                        Database Update
                      </div>
                      <div class="percent">
                        60%
                      </div>
                    </div>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-warning set-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
                        <span class="sr-only">
                          60% Complete (warning)
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="task-info">
                      <div class="desc">
                        Iphone Development
                      </div>
                      <div class="percent">
                        87%
                      </div>
                    </div>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-info set-87" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >
                        <span class="sr-only">
                          87% Complete
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="task-info">
                      <div class="desc">
                        Mobile App
                      </div>
                      <div class="percent">
                        33%
                      </div>
                    </div>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger set-33" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" >
                        <span class="sr-only">
                          33% Complete (danger)
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="task-info">
                      <div class="desc">
                        Dashboard v1.3
                      </div>
                      <div class="percent">
                        45%
                      </div>
                    </div>
                    <div class="progress progress-striped active">
                      <div class="progress-bar set-45" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >
                        <span class="sr-only">
                          45% Complete
                        </span>
                      </div>
                      
                    </div>
                  </a>
                </li>
                <li class="external">
                  <a href="#">
                    See All Tasks
                  </a>
                </li>
              </ul>
              
            </li>
            <!-- END NOTIFY TASK BAR -->
            
            <!-- START NOTIFY INBOX BAR -->
            
            <li id="header_inbox_bar" class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                <i class="fa fa-envelope-o">
                </i>
                <span class="badge bg-important">
                  5
                </span>
              </a>
              <ul class="dropdown-menu extended inbox">
                <li class="notify-arrow notify-arrow-blue">
                </li>
                <li>
                  <p class="blue">
                    You have 5 new messages
                  </p>
                </li>
                <li>
                  <a href="#">
                    <span class="photo">
                      <img alt="avatar" src="./img/avatar-mini.jpg">
                    </span>
                    <span class="subject">
                      <span class="from">
                        Chintan Pandya
                      </span>
                      <span class="time">
                        Just now
                      </span>
                    </span>
                    <span class="message">
                      Hello, this is an example msg.
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="photo">
                      <img alt="avatar" src="./img/avatar-mini2.jpg">
                    </span>
                    <span class="subject">
                      <span class="from">
                        Parth Jani
                      </span>
                      <span class="time">
                        10 mins
                      </span>
                    </span>
                    <span class="message">
                      Hi, Bro how are you ?
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="photo">
                      <img alt="avatar" src="./img/avatar-mini3.jpg">
                    </span>
                    <span class="subject">
                      <span class="from">
                        Jay Bardolia
                      </span>
                      <span class="time">
                        3 hrs
                      </span>
                    </span>
                    <span class="message">
                      This is awesome dashboard.
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="photo">
                      <img alt="avatar" src="./img/avatar-mini4.jpg">
                    </span>
                    <span class="subject">
                      <span class="from">
                        Pruthvi Bardolia
                      </span>
                      <span class="time">
                        Just now
                      </span>
                    </span>
                    <span class="message">
                      Hello, this is metrolab
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    See all messages
                  </a>
                </li>
              </ul>
            </li>
            <!-- END NOTIFY INBOX BAR -->
            
            <!-- START NOTIFY NOTIFICATION BAR -->
            
            <li id="header_notification_bar" class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                <i class="fa fa-bell-o">
                </i>
                <span class="badge bg-warning">
                  7
                </span>
              </a>
              <ul class="dropdown-menu extended notification">
                <li class="notify-arrow notify-arrow-blue">
                </li>
                <li>
                  <p class="blue">
                    You have 7 new notifications
                  </p>
                </li>
                <li>
                  <a href="#">
                    <span class="label label-danger">
                      <i class="fa fa-bolt">
                      </i>
                    </span>
                    Server #3 overloaded.
                    <span class="small italic">
                      34 mins
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="label label-warning">
                      <i class="fa fa-bell">
                      </i>
                    </span>
                    Server #10 not respoding.
                    <span class="small italic">
                      1 Hours
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="label label-danger">
                      <i class="fa fa-bolt">
                      </i>
                    </span>
                    Database overloaded 24%.
                    <span class="small italic">
                      4 hrs
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="label label-success">
                      <i class="fa fa-plus">
                      </i>
                    </span>
                    New user registered.
                    <span class="small italic">
                      Just now
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <span class="label label-primary">
                      <i class="fa fa-bullhorn">
                      </i>
                    </span>
                    Application error.
                    <span class="small italic">
                      10 mins
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    See all notifications
                  </a>
                </li>
              </ul>
            </li>
            <!-- END NOTIFY NOTIFICATION BAR -->
            
          </ul>
          
          
        </nav>
        
        <!-- END HEADER NAV -->
        
        
        <!-- START USER LOGIN DROPDOWN  -->
        
        <div class="top-nav ">
          <ul class="nav pull-right top-menu">
            <li>
              <input type="text" class="form-control search" placeholder="Search">
            </li>
            
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                <img alt="" src="img/avatar1_small.jpg">
                <span class="username">
                  Pruthvi
                </span>
                <b class="caret">
                </b>
              </a>
              <ul class="dropdown-menu extended logout">
                <li class="log-arrow-up">
                </li>
                <li>
                  <a href="#">
                    <i class=" fa fa-suitcase">
                    </i>
                    Profile
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-cog">
                    </i>
                    Settings
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-bell-o">
                    </i>
                    Notification
                  </a>
                </li>
                <li>
                  <a href="login.html">
                    <i class="fa fa-key">
                    </i>
                    Log Out
                  </a>
                </li>
              </ul>
            </li>
            
          </ul>
        </div>
        <!-- END USER LOGIN DROPDOWN  -->
        
      </header>
      <!-- END HEADER -->
      
      
      <!-- BEGIN SIDEBAR -->
      
      <aside>
        <div id="sidebar" class="nav-collapse">
          
          <ul class="sidebar-menu" id="nav-accordion">
            <li>
              <a href="index.html">
                <i class="fa fa-dashboard">
                </i>
                <span>
                  Dashboard
                </span>
              </a>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-laptop">
                </i>
                <span>
                  Layouts
                </span>
                <span class="label label-success span-sidebar">
                  4
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="boxed_page.html">
                    Boxed Page
                  </a>
                </li>
                <li>
                  <a href="horizontal_menu.html">
                    Horizontal Menubar
                  </a>
                </li>
                <li>
                  <a href="language_switch_bar.html">
                    Language Bar
                  </a>
                </li>
                <li>
                  <a href="email_template.html" target="_blank">
                    Email Templates
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-book">
                </i>
                <span>
                  UI Elements
                </span>
                <span class="label label-info span-sidebar">
                  7
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="general.html">
                    General
                  </a>
                </li>
                <li>
                  <a href="buttons.html">
                    Buttons
                  </a>
                </li>
                <li>
                  <a href="widget.html">
                    Widget
                  </a>
                </li>
                <li>
                  <a href="slider.html">
                    Range Slider
                  </a>
                </li>
                <li>
                  <a href="nestable.html">
                    Nestable List
                  </a>
                </li>
                <li>
                  <a href="tree.html">
                    Tree View List
                  </a>
                </li>
                <li>
                  <a href="font_awesome.html">
                    Font Awesome Icon
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-cogs">
                </i>
                <span>
                  Components
                </span>
                <span class="label label-primary span-sidebar">
                  5
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="grids.html">
                    Grids
                  </a>
                </li>
                <li>
                  <a href="calendar.html">
                    Calendar
                  </a>
                </li>
                <li>
                  <a href="gallery.html">
                    Gallery
                  </a>
                </li>
                <li>
                  <a href="todo_list.html">
                    Todo List
                  </a>
                </li>
                <li>
                  <a href="draggable_portlet.html">
                    Draggable Portlets
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;" class="active">
                <i class="fa fa-tasks">
                </i>
                <span>
                  Form Stuff
                </span>
                <span class="label label-info span-sidebar">
                  7
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="form_component.html">
                    Form Components
                  </a>
                </li>
                <li class="active">
                  <a href="advanced_form_components.html">
                    Advanced Components
                  </a>
                </li>
                <li>
                  <a href="form_wizard.html">
                    Form Wizards
                  </a>
                </li>
                <li>
                  <a href="form_validation.html">
                    Form Validation
                  </a>
                </li>
                <li>
                  <a href="dropzone.html">
                    Dropzone File Upload
                  </a>
                </li>
                <li>
                  <a href="inline_editor.html">
                    Inline Editor
                  </a>
                </li>
                
                <li>
                  <a href="file_upload.html">
                    Multiple File Upload
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-th">
                </i>
                <span>
                  Data Tables
                </span>
                <span class="label label-inverse span-sidebar">
                  5
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="basic_table.html">
                    Basic Table
                  </a>
                </li>
                <li>
                  <a href="responsive_table.html">
                    Responsive Table
                  </a>
                </li>
                <li>
                  <a href="dynamic_table.html">
                    Dynamic Table
                  </a>
                </li>
                <li>
                  <a href="advanced_table.html">
                    Advanced Table
                  </a>
                </li>
                <li>
                  <a href="editable_table.html">
                    Editable Table
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class=" fa fa-envelope">
                </i>
                <span>
                  Mail
                </span>
                <span class="label label-danger span-sidebar">
                  2
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="inbox.html">
                    Inbox
                  </a>
                </li>
                <li>
                  <a href="inbox_details.html">
                    Mail Details
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class=" fa fa-bar-chart-o">
                </i>
                <span>
                  Charts
                </span>
                <span class="label label-warning span-sidebar">
                  4
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="morris.html">
                    Morris Chart
                  </a>
                </li>
                <li>
                  <a href="chartjs.html">
                    Chartjs Chart
                  </a>
                </li>
                <li>
                  <a href="flot_chart.html">
                    Flot Charts
                  </a>
                </li>
                <li>
                  <a href="xchart.html">
                    xChart
                  </a>
                </li>
              </ul>
            </li>
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-shopping-cart">
                </i>
                <span>
                  Product
                </span>
                <span class="label label-success span-sidebar">
                  2
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="product_list.html">
                    List View
                  </a>
                </li>
                <li>
                  <a href="product_details.html">
                    Details View
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="google_maps.html">
                <i class="fa fa-map-marker">
                </i>
                <span>
                  Google Maps 
                </span>
              </a>
            </li>
            
            <li class="sub-menu">
              <a href="javascript:;" >
                <i class="fa fa-glass">
                </i>
                <span>
                  Extra Pages
                </span>
                <span class="label label-primary span-sidebar">
                  10
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="blank.html">
                    Blank Page
                  </a>
                </li>
                <li>
                  <a href="lock_screen.html">
                    Lock Screen
                  </a>
                </li>
                <li>
                  <a href="profile.html">
                    Profile
                  </a>
                </li>
                <li>
                  <a href="invoice.html">
                    Invoice
                  </a>
                </li>
                <li>
                  <a href="search_result.html">
                    Search Result
                  </a>
                </li>
                <li>
                  <a href="pricing_table.html">
                    Pricing Table
                  </a>
                </li>
                <li>
                  <a href="faq.html">
                    FAQ
                  </a>
                </li>
                <li >
                  <a href="fb_wall.html">
                    Timeline
                  </a>
                </li>
                <li>
                  <a href="404.html">
                    404 Error
                  </a>
                </li>
                <li>
                  <a href="500.html">
                    500 Error
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="login.html">
                <i class="fa fa-user">
                </i>
                <span>
                  Login Page
                </span>
              </a>
            </li>
            
            <li class="sub-menu">
              <a href="javascript:;">
                <i class="fa fa-sitemap">
                </i>
                <span>
                  Multi level Menu
                </span>
              </a>
              <ul class="sub">
                <li>
                  <a href="javascript:;">
                    Menu Item 1
                  </a>
                </li>
                <li class="sub-menu">
                  <a href="boxed_page.html">
                    Menu Item 2 
                    <span class="label label-primary">
                      1
                    </span>
                  </a>
                  <ul class="sub">
                    <li>
                      <a href="javascript:;">
                        Item 2.1
                      </a>
                    </li>
                    <li class="sub-menu">
                      <a href="javascript:;">
                        Menu Item 3 
                        <span class="label label-primary">
                          3
                        </span>
                      </a>
                      <ul class="sub">
                        <li>
                          <a href="javascript:;">
                            Item 3.1
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            Item 3.2
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            Item 3.2
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            
          </ul>
          
        </div>
      </aside>
      <!-- END SIDEBAR -->
      
      <!-- START MAIN CONTENT -->
      <section id="main-content">
	  
	    <!-- START WRAPPER -->
        <section class="wrapper">
          
          <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Date Pickers
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form action="#" class="form-horizontal tasi-form">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default Datepicker
                      </label>
                      <div class="col-md-3 col-xs-11">
                        <input class="form-control form-control-inline input-medium default-date-picker" size="16" type="text" value="">
                        <span class="help-block">
                          Select date
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Start with years viewMode
                      </label>
                      <div class="col-md-3 col-xs-11">
                        <div data-date-viewmode="years" data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-append date dpYears">
                          <input type="text" readonly="" value="12-02-2012" size="16" class="form-control">
                          <span class="input-group-btn add-on">
                            <button class="btn btn-info" type="button">
                              <i class="fa fa-calendar">
                              </i>
                            </button>
                          </span>
                        </div>
                        <span class="help-block">
                          Select date
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Months Only
                      </label>
                      <div class="col-md-3 col-xs-11">
                        <div data-date-minviewmode="months" data-date-viewmode="years" data-date-format="mm/yyyy" data-date="102/2012" class="input-append date dpMonths">
                          <input type="text" readonly="" value="02/2012" size="16" class="form-control">
                          <span class="input-group-btn add-on">
                            <button class="btn btn-info" type="button">
                              <i class="fa fa-calendar">
                              </i>
                            </button>
                          </span>
                        </div>
                        <span class="help-block">
                          Select month only
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Date Range
                      </label>
                      <div class="col-md-4">
                        <div class="input-group input-large" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                          <input type="text" class="form-control dpd1" name="from">
                          <span class="input-group-addon">
                            To
                          </span>
                          <input type="text" class="form-control dpd2" name="to">
                        </div>
                        <span class="help-block">
                          Select date range
                        </span>
                      </div>
                    </div>
                    <a class="btn btn-primary" data-toggle="modal" href="#myModal">
                      Datepicker in Modal
                    </a>
                    
                    <div class="modal fade" id="myModal" >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                              &times;
                            </button>
                            <h4 class="modal-title">
                              Datepicker in Modal
                            </h4>
                          </div>
                          <div class="modal-body">
                            <div class="form-group">
                              <label class="control-label col-md-3">
                                Default input Datetimepicker
                              </label>
                              <div class="col-md-4">
                                <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-md-4">
                                Default Datepicker
                              </label>
                              <div class="col-md-6 col-xs-11">
                                <input class="form-control form-control-inline input-medium default-date-picker" size="16" type="text" value="">
                                <span class="help-block">
                                  Select date
                                </span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-md-4">
                                Start with years viewMode
                              </label>
                              <div class="col-md-6 col-xs-11">
                                <div data-date-viewmode="years" data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-append date dpYears">
                                  <input type="text" readonly="" value="12-02-2012" size="16" class="form-control">
                                  <span class="input-group-btn add-on">
                                    <button class="btn btn-info" type="button">
                                      <i class="fa fa-calendar">
                                      </i>
                                    </button>
                                    
                                  </span>
                                </div>
                                <span class="help-block">
                                  Select date
                                </span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-md-4">
                                Months Only
                              </label>
                              <div class="col-md-6 col-xs-11">
                                <div data-date-minviewmode="months" data-date-viewmode="years" data-date-format="mm/yyyy" data-date="102/2012" class="input-append date dpMonths">
                                  <input type="text" readonly="" value="02/2012" size="16" class="form-control">
                                  <span class="input-group-btn add-on">
                                    <button class="btn btn-info" type="button">
                                      <i class="fa fa-calendar">
                                      </i>
                                    </button>
                                  </span>
                                </div>
                                <span class="help-block">
                                  Select month only
                                </span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-md-4">
                                Date Range
                              </label>
                              <div class="col-md-6">
                                <div class="input-group input-large" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                  <input type="text" class="form-control dpd1" name="from">
                                  <span class="input-group-addon">
                                    To
                                  </span>
                                  <input type="text" class="form-control dpd2" name="to">
                                </div>
                                <span class="help-block">
                                  Select date range
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Datetime Pickers
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form class="form-horizontal  tasi-form" action="#">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default input Datetimepicker
                      </label>
                      <div class="col-md-4">
                        <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Component Datetimepicker
                      </label>
                      <div class="col-md-4">
                        <div class="input-group date form_datetime-component">
                          <input type="text" class="form-control" readonly="" size="16">
                          <span class="input-group-btn">
                            <button type="button" class="btn btn-info date-set">
                              <i class="fa fa-calendar">
                              </i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Advance Datetimepicker
                      </label>
                      <div class="col-md-4">
                        <div data-date="2012-12-21T15:25:00Z" class="input-group date form_datetime-adv">
                          <input type="text" class="form-control" readonly="" size="16">
                          <div class="input-group-btn">
                            <button type="button" class="btn btn-danger date-reset">
                              <i class="fa fa-times">
                              </i>
                            </button>
                            <button type="button" class="btn btn-info date-set">
                              <i class="fa fa-calendar">
                              </i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Meridian Format
                      </label>
                      <div class="col-md-4">
                        <div data-date="2012-12-21T15:25:00Z" class="input-group date form_datetime-meridian">
                          <input type="text" class="form-control" readonly="" size="16">
                          <div class="input-group-btn">
                            <button type="button" class="btn btn-danger date-reset">
                              <i class="fa fa-times">
                              </i>
                            </button>
                            <button type="button" class="btn btn-info date-set">
                              <i class="fa fa-calendar">
                              </i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Time Pickers
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form class="form-horizontal  tasi-form" action="#">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default Timepicker
                      </label>
                      <div class="col-md-4">
                        <div class="input-group bootstrap-timepicker">
                          <input type="text" class="form-control timepicker-default">
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                              <i class="fa fa-clock-o">
                              </i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        24hr Timepicker
                      </label>
                      <div class="col-md-4">
                        <div class="input-group bootstrap-timepicker">
                          <input type="text" class="form-control timepicker-24">
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                              <i class="fa fa-clock-o">
                              </i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  
                  <span class="label label-primary">
                    Color Pickers
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form class="form-horizontal  tasi-form" action="#">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default
                      </label>
                      <div class="col-md-4">
                        <input type="text" class="colorpicker-default form-control" value="#8fff00">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        RGBA
                      </label>
                      <div class="col-md-4">
                        <input type="text" class="colorpicker-rgba form-control" value="rgb(0,194,255,0.78)" data-color-format="rgba">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        As Component
                      </label>
                      <div class="col-md-4 col-xs-11">
                        <div data-color-format="rgb" data-color="rgb(255, 146, 180)" class="input-append colorpicker-default color">
                          <input type="text" readonly="" value="" class="form-control">
                          <span class=" input-group-btn add-on">
                            <button class="btn btn-white pad-8" type="button" >
                              <i style="background-color: rgb(124, 66, 84);">
                              </i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Spinners
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form action="#" class="form-horizontal tasi-form">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Spinner 1
                      </label>
                      <div class="col-md-2">
                        <div id="spinner1">
                          <div class="input-group input-small">
                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                            <div class="spinner-buttons input-group-btn btn-group-vertical">
                              <button type="button" class="btn spinner-up btn-xs btn-default">
                                <i class="fa fa-angle-up">
                                </i>
                              </button>
                              <button type="button" class="btn spinner-down btn-xs btn-default">
                                <i class="fa fa-angle-down">
                                </i>
                              </button>
                            </div>
                          </div>
                        </div>
                        <span class="help-block">
                          basic example
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Spinner 2
                      </label>
                      <div class="col-md-2">
                        <div id="spinner2">
                          <div class="input-group input-small">
                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                            <div class="spinner-buttons input-group-btn btn-group-vertical">
                              <button type="button" class="btn spinner-up btn-xs btn-danger">
                                <i class="fa fa-angle-up">
                                </i>
                              </button>
                              <button type="button" class="btn spinner-down btn-xs btn-danger">
                                <i class="fa fa-angle-down">
                                </i>
                              </button>
                            </div>
                          </div>
                        </div>
                        <span class="help-block">
                          disabled state
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Spinner 3
                      </label>
                      <div class="col-md-9">
                        <div id="spinner3">
                          <div class="input-group w-150" >
                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                            <div class="spinner-buttons input-group-btn">
                              <button type="button" class="btn btn-default spinner-up">
                                <i class="fa fa-angle-up">
                                </i>
                              </button>
                              <button type="button" class="btn btn-default spinner-down">
                                <i class="fa fa-angle-down">
                                </i>
                              </button>
                            </div>
                          </div>
                        </div>
                        <span class="help-block">
                          with max value: 10
                        </span>
                      </div>
                    </div>
                    <div class="form-group ">
                      <label class="control-label col-md-3">
                        Spinner 4
                      </label>
                      <div class="col-md-9">
                        <div id="spinner4">
                          <div class="input-group w-150" >
                            <div class="spinner-buttons input-group-btn">
                              <button type="button" class="btn spinner-up btn-success">
                                <i class="fa fa-plus">
                                </i>
                              </button>
                            </div>
                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                            <div class="spinner-buttons input-group-btn">
                              <button type="button" class="btn spinner-down btn-danger">
                                <i class="fa fa-minus">
                                </i>
                              </button>
                            </div>
                          </div>
                        </div>
                        <span class="help-block">
                          with step: 5
                        </span>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
          <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Multiple Select
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form action="#" class="form-horizontal tasi-form">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default
                      </label>
                      <div class="col-md-9">
                        <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
                          <option>
                            Dallas Cowboys
                          </option>
                          <option>
                            New York Giants
                          </option>
                          <option selected>
                            Philadelphia Eagles
                          </option>
                          <option selected>
                            Washington Redskins
                          </option>
                          <option>
                            Chicago Bears
                          </option>
                          <option>
                            Detroit Lions
                          </option>
                          <option>
                            Green Bay Packers
                          </option>
                          <option>
                            Minnesota Vikings
                          </option>
                          <option selected>
                            Atlanta Falcons
                          </option>
                          <option>
                            Carolina Panthers
                          </option>
                          <option>
                            New Orleans Saints
                          </option>
                          <option>
                            Tampa Bay Buccaneers
                          </option>
                          <option>
                            Arizona Cardinals
                          </option>
                          <option>
                            St. Louis Rams
                          </option>
                          <option>
                            San Francisco 49ers
                          </option>
                          <option>
                            Seattle Seahawks
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Grouped Options
                      </label>
                      <div class="col-md-9">
                        <select multiple="multiple" class="multi-select" id="my_multi_select2" name="my_multi_select2[]">
                          <optgroup label="NFC EAST">
                            <option>
                              Dallas Cowboys
                            </option>
                            <option>
                              New York Giants
                            </option>
                            <option>
                              Philadelphia Eagles
                            </option>
                            <option>
                              Washington Redskins
                            </option>
                          </optgroup>
                          <optgroup label="NFC NORTH">
                            <option>
                              Chicago Bears
                            </option>
                            <option>
                              Detroit Lions
                            </option>
                            <option>
                              Green Bay Packers
                            </option>
                            <option>
                              Minnesota Vikings
                            </option>
                          </optgroup>
                          <optgroup label="NFC SOUTH">
                            <option>
                              Atlanta Falcons
                            </option>
                            <option>
                              Carolina Panthers
                            </option>
                            <option>
                              New Orleans Saints
                            </option>
                            <option>
                              Tampa Bay Buccaneers
                            </option>
                          </optgroup>
                          <optgroup label="NFC WEST">
                            <option>
                              Arizona Cardinals
                            </option>
                            <option>
                              St. Louis Rams
                            </option>
                            <option>
                              San Francisco 49ers
                            </option>
                            <option>
                              Seattle Seahawks
                            </option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                    <div class="form-group last">
                      <label class="control-label col-md-3">
                        Searchable
                      </label>
                      <div class="col-md-9">
                        <select name="country" class="multi-select" multiple="" id="my_multi_select3">
                          <option value="AF">
                            Afghanistan
                          </option>
                          <option value="AL">
                            Albania
                          </option>
                          <option value="DZ">
                            Algeria
                          </option>
                          <option value="AS">
                            American Samoa
                          </option>
                          <option value="AD">
                            Andorra
                          </option>
                          <option value="AO">
                            Angola
                          </option>
                          <option value="AI">
                            Anguilla
                          </option>
                          <option value="AQ">
                            Antarctica
                          </option>
                          <option value="AR">
                            Argentina
                          </option>
                          <option value="AM">
                            Armenia
                          </option>
                          <option value="AW">
                            Aruba
                          </option>
                          <option value="AU">
                            Australia
                          </option>
                          <option value="AT">
                            Austria
                          </option>
                          <option value="AZ">
                            Azerbaijan
                          </option>
                          <option value="BS">
                            Bahamas
                          </option>
                          <option value="BH">
                            Bahrain
                          </option>
                          <option value="BD">
                            Bangladesh
                          </option>
                          <option value="BB">
                            Barbados
                          </option>
                          <option value="BY">
                            Belarus
                          </option>
                          <option value="BE">
                            Belgium
                          </option>
                          <option value="BZ">
                            Belize
                          </option>
                          <option value="BJ">
                            Benin
                          </option>
                          <option value="BM">
                            Bermuda
                          </option>
                          <option value="BT">
                            Bhutan
                          </option>
                          <option value="BO">
                            Bolivia
                          </option>
                          <option value="BA">
                            Bosnia and Herzegowina
                          </option>
                          <option value="BW">
                            Botswana
                          </option>
                          <option value="BV">
                            Bouvet Island
                          </option>
                          <option value="BR">
                            Brazil
                          </option>
                          <option value="IO">
                            British Indian Ocean Territory
                          </option>
                          <option value="BN">
                            Brunei Darussalam
                          </option>
                          <option value="BG">
                            Bulgaria
                          </option>
                          <option value="BF">
                            Burkina Faso
                          </option>
                          <option value="BI">
                            Burundi
                          </option>
                          <option value="KH">
                            Cambodia
                          </option>
                          <option value="CM">
                            Cameroon
                          </option>
                          <option value="CA">
                            Canada
                          </option>
                          <option value="CV">
                            Cape Verde
                          </option>
                          <option value="KY">
                            Cayman Islands
                          </option>
                          <option value="CF">
                            Central African Republic
                          </option>
                          <option value="TD">
                            Chad
                          </option>
                          <option value="CL">
                            Chile
                          </option>
                          <option value="CN">
                            China
                          </option>
                          <option value="CX">
                            Christmas Island
                          </option>
                          <option value="CC">
                            Cocos (Keeling) Islands
                          </option>
                          <option value="CO">
                            Colombia
                          </option>
                          <option value="KM">
                            Comoros
                          </option>
                          <option value="CG">
                            Congo
                          </option>
                          <option value="CD">
                            Congo, the Democratic Republic of the
                          </option>
                          <option value="CK">
                            Cook Islands
                          </option>
                          <option value="CR">
                            Costa Rica
                          </option>
                          <option value="CI">
                            Cote d'Ivoire
                          </option>
                          <option value="HR">
                            Croatia (Hrvatska)
                          </option>
                          <option value="CU">
                            Cuba
                          </option>
                          <option value="CY">
                            Cyprus
                          </option>
                          <option value="CZ">
                            Czech Republic
                          </option>
                          <option value="DK">
                            Denmark
                          </option>
                          <option value="DJ">
                            Djibouti
                          </option>
                          <option value="DM">
                            Dominica
                          </option>
                          <option value="DO">
                            Dominican Republic
                          </option>
                          <option value="EC">
                            Ecuador
                          </option>
                          <option value="EG">
                            Egypt
                          </option>
                          <option value="SV">
                            El Salvador
                          </option>
                          <option value="GQ">
                            Equatorial Guinea
                          </option>
                          <option value="ER">
                            Eritrea
                          </option>
                          <option value="EE">
                            Estonia
                          </option>
                          <option value="ET">
                            Ethiopia
                          </option>
                          <option value="FK">
                            Falkland Islands (Malvinas)
                          </option>
                          <option value="FO">
                            Faroe Islands
                          </option>
                          <option value="FJ">
                            Fiji
                          </option>
                          <option value="FI">
                            Finland
                          </option>
                          <option value="FR">
                            France
                          </option>
                          <option value="GF">
                            French Guiana
                          </option>
                          <option value="PF">
                            French Polynesia
                          </option>
                          <option value="TF">
                            French Southern Territories
                          </option>
                          <option value="GA">
                            Gabon
                          </option>
                          <option value="GM">
                            Gambia
                          </option>
                          <option value="GE">
                            Georgia
                          </option>
                          <option value="DE">
                            Germany
                          </option>
                          <option value="GH">
                            Ghana
                          </option>
                          <option value="GI">
                            Gibraltar
                          </option>
                          <option value="GR">
                            Greece
                          </option>
                          <option value="GL">
                            Greenland
                          </option>
                          <option value="GD">
                            Grenada
                          </option>
                          <option value="GP">
                            Guadeloupe
                          </option>
                          <option value="GU">
                            Guam
                          </option>
                          <option value="GT">
                            Guatemala
                          </option>
                          <option value="GN">
                            Guinea
                          </option>
                          <option value="GW">
                            Guinea-Bissau
                          </option>
                          <option value="GY">
                            Guyana
                          </option>
                          <option value="HT">
                            Haiti
                          </option>
                          <option value="HM">
                            Heard and Mc Donald Islands
                          </option>
                          <option value="VA">
                            Holy See (Vatican City State)
                          </option>
                          <option value="HN">
                            Honduras
                          </option>
                          <option value="HK">
                            Hong Kong
                          </option>
                          <option value="HU">
                            Hungary
                          </option>
                          <option value="IS">
                            Iceland
                          </option>
                          <option value="IN">
                            India
                          </option>
                          <option value="ID">
                            Indonesia
                          </option>
                          <option value="IR">
                            Iran (Islamic Republic of)
                          </option>
                          <option value="IQ">
                            Iraq
                          </option>
                          <option value="IE">
                            Ireland
                          </option>
                          <option value="IL">
                            Israel
                          </option>
                          <option value="IT">
                            Italy
                          </option>
                          <option value="JM">
                            Jamaica
                          </option>
                          <option value="JP">
                            Japan
                          </option>
                          <option value="JO">
                            Jordan
                          </option>
                          <option value="KZ">
                            Kazakhstan
                          </option>
                          <option value="KE">
                            Kenya
                          </option>
                          <option value="KI">
                            Kiribati
                          </option>
                          <option value="KP">
                            Korea, Democratic People's Republic of
                          </option>
                          <option value="KR">
                            Korea, Republic of
                          </option>
                          <option value="KW">
                            Kuwait
                          </option>
                          <option value="KG">
                            Kyrgyzstan
                          </option>
                          <option value="LA">
                            Lao People's Democratic Republic
                          </option>
                          <option value="LV">
                            Latvia
                          </option>
                          <option value="LB">
                            Lebanon
                          </option>
                          <option value="LS">
                            Lesotho
                          </option>
                          <option value="LR">
                            Liberia
                          </option>
                          <option value="LY">
                            Libyan Arab Jamahiriya
                          </option>
                          <option value="LI">
                            Liechtenstein
                          </option>
                          <option value="LT">
                            Lithuania
                          </option>
                          <option value="LU">
                            Luxembourg
                          </option>
                          <option value="MO">
                            Macau
                          </option>
                          <option value="MK">
                            Macedonia, The Former Yugoslav Republic of
                          </option>
                          <option value="MG">
                            Madagascar
                          </option>
                          <option value="MW">
                            Malawi
                          </option>
                          <option value="MY">
                            Malaysia
                          </option>
                          <option value="MV">
                            Maldives
                          </option>
                          <option value="ML">
                            Mali
                          </option>
                          <option value="MT">
                            Malta
                          </option>
                          <option value="MH">
                            Marshall Islands
                          </option>
                          <option value="MQ">
                            Martinique
                          </option>
                          <option value="MR">
                            Mauritania
                          </option>
                          <option value="MU">
                            Mauritius
                          </option>
                          <option value="YT">
                            Mayotte
                          </option>
                          <option value="MX">
                            Mexico
                          </option>
                          <option value="FM">
                            Micronesia, Federated States of
                          </option>
                          <option value="MD">
                            Moldova, Republic of
                          </option>
                          <option value="MC">
                            Monaco
                          </option>
                          <option value="MN">
                            Mongolia
                          </option>
                          <option value="MS">
                            Montserrat
                          </option>
                          <option value="MA">
                            Morocco
                          </option>
                          <option value="MZ">
                            Mozambique
                          </option>
                          <option value="MM">
                            Myanmar
                          </option>
                          <option value="NA">
                            Namibia
                          </option>
                          <option value="NR">
                            Nauru
                          </option>
                          <option value="NP">
                            Nepal
                          </option>
                          <option value="NL">
                            Netherlands
                          </option>
                          <option value="AN">
                            Netherlands Antilles
                          </option>
                          <option value="NC">
                            New Caledonia
                          </option>
                          <option value="NZ">
                            New Zealand
                          </option>
                          <option value="NI">
                            Nicaragua
                          </option>
                          <option value="NE">
                            Niger
                          </option>
                          <option value="NG">
                            Nigeria
                          </option>
                          <option value="NU">
                            Niue
                          </option>
                          <option value="NF">
                            Norfolk Island
                          </option>
                          <option value="MP">
                            Northern Mariana Islands
                          </option>
                          <option value="NO">
                            Norway
                          </option>
                          <option value="OM">
                            Oman
                          </option>
                          <option value="PK">
                            Pakistan
                          </option>
                          <option value="PW">
                            Palau
                          </option>
                          <option value="PA">
                            Panama
                          </option>
                          <option value="PG">
                            Papua New Guinea
                          </option>
                          <option value="PY">
                            Paraguay
                          </option>
                          <option value="PE">
                            Peru
                          </option>
                          <option value="PH">
                            Philippines
                          </option>
                          <option value="PN">
                            Pitcairn
                          </option>
                          <option value="PL">
                            Poland
                          </option>
                          <option value="PT">
                            Portugal
                          </option>
                          <option value="PR">
                            Puerto Rico
                          </option>
                          <option value="QA">
                            Qatar
                          </option>
                          <option value="RE">
                            Reunion
                          </option>
                          <option value="RO">
                            Romania
                          </option>
                          <option value="RU">
                            Russian Federation
                          </option>
                          <option value="RW">
                            Rwanda
                          </option>
                          <option value="KN">
                            Saint Kitts and Nevis
                          </option>
                          <option value="LC">
                            Saint LUCIA
                          </option>
                          <option value="VC">
                            Saint Vincent and the Grenadines
                          </option>
                          <option value="WS">
                            Samoa
                          </option>
                          <option value="SM">
                            San Marino
                          </option>
                          <option value="ST">
                            Sao Tome and Principe
                          </option>
                          <option value="SA">
                            Saudi Arabia
                          </option>
                          <option value="SN">
                            Senegal
                          </option>
                          <option value="SC">
                            Seychelles
                          </option>
                          <option value="SL">
                            Sierra Leone
                          </option>
                          <option value="SG">
                            Singapore
                          </option>
                          <option value="SK">
                            Slovakia (Slovak Republic)
                          </option>
                          <option value="SI">
                            Slovenia
                          </option>
                          <option value="SB">
                            Solomon Islands
                          </option>
                          <option value="SO">
                            Somalia
                          </option>
                          <option value="ZA">
                            South Africa
                          </option>
                          <option value="GS">
                            South Georgia and the South Sandwich Islands
                          </option>
                          <option value="ES">
                            Spain
                          </option>
                          <option value="LK">
                            Sri Lanka
                          </option>
                          <option value="SH">
                            St. Helena
                          </option>
                          <option value="PM">
                            St. Pierre and Miquelon
                          </option>
                          <option value="SD">
                            Sudan
                          </option>
                          <option value="SR">
                            Suriname
                          </option>
                          <option value="SJ">
                            Svalbard and Jan Mayen Islands
                          </option>
                          <option value="SZ">
                            Swaziland
                          </option>
                          <option value="SE">
                            Sweden
                          </option>
                          <option value="CH">
                            Switzerland
                          </option>
                          <option value="SY">
                            Syrian Arab Republic
                          </option>
                          <option value="TW">
                            Taiwan, Province of China
                          </option>
                          <option value="TJ">
                            Tajikistan
                          </option>
                          <option value="TZ">
                            Tanzania, United Republic of
                          </option>
                          <option value="TH">
                            Thailand
                          </option>
                          <option value="TG">
                            Togo
                          </option>
                          <option value="TK">
                            Tokelau
                          </option>
                          <option value="TO">
                            Tonga
                          </option>
                          <option value="TT">
                            Trinidad and Tobago
                          </option>
                          <option value="TN">
                            Tunisia
                          </option>
                          <option value="TR">
                            Turkey
                          </option>
                          <option value="TM">
                            Turkmenistan
                          </option>
                          <option value="TC">
                            Turks and Caicos Islands
                          </option>
                          <option value="TV">
                            Tuvalu
                          </option>
                          <option value="UG">
                            Uganda
                          </option>
                          <option value="UA">
                            Ukraine
                          </option>
                          <option value="AE">
                            United Arab Emirates
                          </option>
                          <option value="GB">
                            United Kingdom
                          </option>
                          <option value="US">
                            United States
                          </option>
                          <option value="UM">
                            United States Minor Outlying Islands
                          </option>
                          <option value="UY">
                            Uruguay
                          </option>
                          <option value="UZ">
                            Uzbekistan
                          </option>
                          <option value="VU">
                            Vanuatu
                          </option>
                          <option value="VE">
                            Venezuela
                          </option>
                          <option value="VN">
                            Viet Nam
                          </option>
                          <option value="VG">
                            Virgin Islands (British)
                          </option>
                          <option value="VI">
                            Virgin Islands (U.S.)
                          </option>
                          <option value="WF">
                            Wallis and Futuna Islands
                          </option>
                          <option value="EH">
                            Western Sahara
                          </option>
                          <option value="YE">
                            Yemen
                          </option>
                          <option value="ZM">
                            Zambia
                          </option>
                          <option value="ZW">
                            Zimbabwe
                          </option>
                        </select>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  <span class="label label-primary">
                    Advanced File Input
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form action="#" class="form-horizontal tasi-form">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Default
                      </label>
                      <div class="col-md-4">
                        <input type="file" class="default">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        Without input
                      </label>
                      <div class="controls col-md-9">
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                          <span class="btn btn-white btn-file">
                            <span class="fileupload-new">
                              <i class="fa fa-paper-clip">
                              </i>
                              Select file
                            </span>
                            <span class="fileupload-exists">
                              <i class="fa fa-undo">
                              </i>
                              Change
                            </span>
                            <input type="file" class="default">
                          </span>
                          <span class="fileupload-preview m-l-5" >
                          </span>
                          <a href="#" class="close fileupload-exists" data-dismiss="fileupload" >
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="form-group last">
                      <label class="control-label col-md-3">
                        Image Upload
                      </label>
                      <div class="col-md-9">
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                          <div class="fileupload-new thumbnail" >
                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="">
                          </div>
                          <div class="fileupload-preview fileupload-exists thumbnail" >
                          </div>
                          <div>
                            <span class="btn btn-white btn-file">
                              <span class="fileupload-new">
                                <i class="fa fa-paper-clip">
                                </i>
                                Select image
                              </span>
                              <span class="fileupload-exists">
                                <i class="fa fa-undo">
                                </i>
                                Change
                              </span>
                              <input type="file" class="default">
                            </span>
                            <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload">
                              <i class="fa fa-trash">
                              </i>
                              Remove
                            </a>
                          </div>
                        </div>
                        <span class="label label-danger">
                          NOTE!
                        </span>
                        <span>
                          Attached image thumbnail is
                          supported in Latest Firefox, Chrome, Opera,
                          Safari and Internet Explorer 10 only
                        </span>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		  <!-- START ROW -->
          <div class="row">
            <div class="col-md-12">
              <section class="panel">
                <header class="panel-heading">
                  
                  <span class="label label-primary">
                    WYSIWYG Editors
                  </span>
                  <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down">
                    </a>
                    <a href="javascript:;" class="fa fa-times">
                    </a>
                  </span>
                </header>
                <div class="panel-body">
                  <form action="#" class="form-horizontal tasi-form">
                    <div class="form-group">
                      <label class="control-label col-md-3">
                        WYSIHTML5 Editor
                      </label>
                      <div class="col-md-9">
                        <textarea class="wysihtml5 form-control" rows="10">
                        </textarea>
                      </div>
                    </div>
                  </form>
                </div>
              </section>
            </div>
          </div>
		  <!-- END ROW -->
		    <!-- START ROW -->
          <div class="row">
		      
            <div class="col-lg-12">
              <section class="panel">
                <header class="panel-heading">
                  
                  <span class="label label-primary">
                    CKEditor
                  </span>
                </header>
                <div class="panel-body">
                  <div class="form">
                    <form action="#" class="form-horizontal">
                      <div class="form-group">
                        <label class="col-sm-2 control-label col-sm-2">
                          CKEditor
                        </label>
                        <div class="col-sm-10">
                          <textarea class="form-control ckeditor" name="editor1" rows="6">
                          </textarea>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </section>
            </div>
          </div>
		    <!-- END ROW -->
        </section>
		<!-- START WRAPPER -->
      </section>
      <!-- END MAIN CONTENT -->
      <!-- BEGIN FOOTER -->
      
      <footer class="site-footer">
        <div class="text-center">
          2013 &copy; Olive Admin by 
          <a href="" target="_blank">
            Olive Enterprise
          </a>
          .
          <a href="http://www.mycodes.net" class="go-top">
            <i class="fa fa-angle-up">
            </i>
          </a>
        </div>
      </footer>
      <!-- END FOOTER -->
      
    </section>
    <!-- END SECTION -->
    
    
    <!-- BEGIN JS -->
    
    <script src="js/jquery.js" ></script><!-- BASIC JS LIABRARY -->
    <script src="js/bootstrap.min.js" ></script><!-- BOOTSTRAP JS  -->
    <script src="js/jquery.dcjqaccordion.2.7.js"></script><!-- ACCORDING JS -->
    <script src="js/jquery.scrollTo.min.js" ></script><!-- SCROLLTO JS  -->
    <script src="js/jquery.nicescroll.js" > </script><!-- NICESCROLL JS  -->
    <script src="js/respond.min.js" ></script><!-- RESPOND JS  -->
    <script src="assets/fuelux/js/spinner.min.js"></script><!-- FUELUX JS  -->
    <script src="assets/bootstrap-fileupload/bootstrap-fileupload.js"></script><!-- BOOTSTRAP FILEUPLOAD JS  -->
    <script src="assets/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script><!-- BOOTSTRAP wysihtml5 JS  -->
    <script src="assets/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script><!-- BOOTSTRAP wysihtml5 JS  -->
    <script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script><!-- BOOTSTRAP DATEPICKER JS  -->
    <script src="assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script><!-- BOOTSTRAP DATETIMEPICKER JS  -->
    <script src="assets/bootstrap-daterangepicker/moment.min.js"></script>
    <script src="assets/bootstrap-daterangepicker/daterangepicker.js"></script><!-- BOOTSTRAP DATERANGEPICKER JS  -->
    <script src="assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js"> </script><!-- BOOTSTRAP COLORPICKER JS  -->
    <script src="assets/bootstrap-timepicker/js/bootstrap-timepicker.js"></script><!-- BOOTSTRAP TIMEPICKER JS  -->
    <script src="assets/jquery-multi-select/js/jquery.multi-select.js"></script><!-- BOOTSTRAP MULTISELECT JS  -->
    <script src="assets/jquery-multi-select/js/jquery.quicksearch.js"></script><!-- BOOTSTRAP MULTISELECT JS  -->
    <script src="js/common-scripts.js" ></script><!-- BASIC COMMON JS  -->
    <script src="js/advanced-form-components.js" ></script><!-- ADVANCE FORM COMPONENTS PAGE JS  -->
    <script src="assets/ckeditor/ckeditor.js"></script><!-- CKEDITOR JS  -->
    <!-- END JS -->
    
    
  </body>
</html>

